<template>
	<div class="environmentalMonitoring">
		<div class="boxTitle">
			<img src="@/assets/images/home/rightIcon.png" alt="">
			<span class="title">环境监测</span>
		</div>
		<div class="r1_top">
			<div class="r1_box">
				<img src="@/assets/images/home/01-icon.png" alt="">
				<div class="r1_text">
					<span class="r1_text1">23μm</span>
					<span class="r1_text2">颗粒物</span>
				</div>
			</div>
			<div class="r1_box">
				<img src="@/assets/images/home/02-icon.png" alt="">
				<div class="r1_text">
					<span class="r1_text1">13mg</span>
					<span class="r1_text2">S02</span>
				</div>
			</div>
			<div class="r1_box">
				<img src="@/assets/images/home/03-icon.png" alt="">
				<div class="r1_text">
					<span class="r1_text1">46mg</span>
					<span class="r1_text2">HCL</span>
				</div>
			</div>
		</div>
		<div class="r1_top">
			<div class="r1_box">
				<img src="@/assets/images/home/04-icon.png" alt="">
				<div class="r1_text">
					<span class="r1_text1">28mg</span>
					<span class="r1_text2">CO</span>
				</div>
			</div>
			<div class="r1_box">
				<img src="@/assets/images/home/05-icon.png" alt="">
				<div class="r1_text">
					<span class="r1_text1">13mg</span>
					<span class="r1_text2">重金属</span>
				</div>
			</div>
			<div class="r1_box">
				<img src="@/assets/images/home/06-icon.png" alt="">
				<div class="r1_text">
					<span class="r1_text1">46mg</span>
					<span class="r1_text2">二噁英</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.environmentalMonitoring {
    transition: transform 0.5s ease;
	position: absolute;
	background: url(@/assets/images/home/right1.png) no-repeat;
	background-size: 100% 100%;
	right: vw(21);
	top: vh(61);
	width: vh(421);
	height: vh(165);
	z-index: 999;

	.boxTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: vh(8);

		img {
			width: vh(16);
			height: vh(14);
		}

		.title {
			margin-left: vh(6);
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: vh(16);
			color: #00E3FE;
			line-height: vh(16);
		}
	}

	.r1_top {
		margin-top: vh(18);
		padding: 0 vh(14);
		display: flex;
		justify-content: space-between;

		.r1_box {
			display: flex;

			img {
				width: vh(40);
				height: vh(40);
			}

			.r1_text {
				width: vh(79);
				height: vh(40);
				background: rgba(0, 153, 203, 0.1);
				margin-left: vh(1);
				padding-left: vh(12);
				padding-top: vh(4);
				display: flex;
				flex-direction: column;

				.r1_text1 {
					line-height: vh(16);
					font-family: DIN;
					font-weight: bold;
					font-size: vh(16);
					color: #EDA915;
					margin-bottom: vh(3);
				}

				.r1_text2 {
					line-height: vh(12);
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: vh(12);
					color: #FFFFFF;
				}
			}
		}
	}

}
</style>